<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import { onMounted, ref, defineEmits } from "vue";
import { tableData1 } from "../info/exolainJson";
const columns = ref([
  {
    prop: "sort",
    label: "服务领域",
    align: "center"
  },
  {
    label: "项目编号",
    prop: "number",
    align: "center",
    minWidth: "110"
  },
  {
    prop: "name",
    label: "项目名称",
    showOverflowTooltip: true
  },
  {
    prop: "unit",
    label: "承接单位",
    align: "center",
    showOverflowTooltip: true
  },
  {
    prop: "createTime",
    label: "执行时间",
    width: "190",
    align: "center",
    slot: "createTime"
  },
  {
    prop: "money",
    label: "金额",
    align: "center",
    slot: "money"
  },

  {
    prop: "status",
    label: "状态",
    align: "center",
    slot: "status"
  }
]);
const tableData = ref(tableData1);

const num = Array.from(new Set(tableData1.map(item => item.type)));
function flatByFor(arr) {
  const res = [];

  for (let i = 0; i < arr.length; i++) {
    arr[i]?.children?.length
      ? res.push(...flatByFor(arr[i].children))
      : res.push(arr[i]);
  }
  return res;
}
const appDoalogRef = ref("");
const submitClick = form => {
  tableData.value.push(form);
};
const submitsub = form => {
  const index = tableData.value.findIndex(item => item.id === form.parentId);
  tableData.value[index]["children"].push(form);
};
</script>

<template>
  <div class="pl-[10px] headerTitle mt-[20px]">
    <span class="after"></span>子项目清单

    <el-text class="mx-1 !ml-[20px]">
      合计
      <span class="font-medium" style="color: #f56c6c">{{ num.length }}</span
      >大类
      <span class="font-medium" style="color: #f56c6c">
        {{ tableData.length }}</span
      >
      个大项目,
      <span class="font-medium" style="color: #f56c6c">{{
        flatByFor(tableData1).length
      }}</span
      >个小项目
    </el-text>
  </div>

  <pure-table
    class="mt-[10px]"
    :data="tableData"
    :columns="columns"
    border
    :header-cell-style="{
      textAlign: 'center',
      background: '#f5f7fa'
    }"
  >
    <template #money="{ row }">
      <span :class="{ 'font-medium': row.children }">{{ row.money }}</span>
    </template>
    <template #status="{ row }">
      <el-tag type="primary">{{ row.status }}</el-tag>
    </template>
    <template #createTime="{ row }">
      <span>{{ row.createTime.join("至") }}</span>
    </template>
  </pure-table>
</template>
<style lang="scss" scoped>
.headerTitle {
  content: " ";
  position: relative;
  border-bottom: 1px solid #eee;
  line-height: 48px;
  span.after {
    width: 4px;
    height: 15px;
    background: #409eff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
  }
}
</style>
